<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 500px;
        height: 300px;
        margin: 200px auto;
      }
      ul {
        width: 450px;
        padding-left: 80px;
      }
      ul li {
        line-height: 25px;
        border-bottom: 1px dashed #ccc;
        display: none;
      }
      input {
        float: right;
      }
      ul li a {
        float: right;
      }
    </style>
    <script src="jquery.min.js"></script>
    <script>
      $(function () {
        //1.点击创建小li
        $(".btn").on("click", function () {
          var li = $("<li></li>");
          li.html($(".txt").val() + "<a href ='javascript:;'>删除</a>");
          $("ul").prepend(li);
          li.slideDown();
          $(".txt").val("");
        });
        //2.点击删除按钮，可以删除li
        $("ul").on("click", "a", function () {
          $(this)
            .parent()
            .slideUp(function () {
              $(this).remove();
            });
        });
      });
    </script>
  </head>

  <body>
    <div class="box" id="weibo">
      <span>微博发布</span>
      <textarea name="" class="txt" id="" cols="30" rows="10"></textarea>
      <button class="btn">发布</button>
      <ul></ul>
    </div>
  </body>
</html>
